<template>
  <div class="pad10 tac flcc fs16">
    条形码生成器
    <div>
      <mu-row :gutter="true">
        <mu-col span="12">
          <mu-text-field v-model="text" class="" label="数据" placeholder="粘入文本" multi-line :rows="10" :rows-max="10" full-width></mu-text-field>
        </mu-col>
      </mu-row>
      <mu-row>
        <mu-button full-width @click="create()">分析</mu-button>
      </mu-row>
    </div>
    <div>
      <div v-for="(item, index) in list">
        <img :id="'bar' + index" src="" alt="">
<!--        <div>{{// item}}</div>-->
      </div>
    </div>
  </div>
</template>

<script>
import Layout from './layout'
import barcode from '@/assets/js/barcode'
export default {
  name: 'barcode',
  data () {
    return {
      docked: true,
      open: true,
      position: 'left',
      text: '',
      list: []
    }
  },
  comments: { Layout },
  methods: {
    create(){
      let arr = this.text.split("\n")
      console.log(arr)
      this.list = arr
      let _this = this
      let loading = this.$loading()
      setTimeout(function () {
        loading.close()
        _this.list.map(function (data,index) {
          console.log(index)
          JsBarcode("#bar"+index, data)
        })
      },500 + 200 * (arr.length<5 ? arr.length : 5 ))
    }
  },
  created () {

  },
  mounted () {

  }
}
</script>

<style scoped>

</style>
